<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		.container .title{
			background:#eee;
			border:1px solid #aaa;
			padding:6px;
			font-size:1.2em;
			font-weight:bold;
			cursor:pointer; 
		}
		.container .content{
			border:1px solid #aaa;
			padding:6px;
		}
	</style>
	
</head>
<body>
	<h1>手风琴效果</h1>
	<div class="container">
		<div class="title" data-toggle="content">
			《西游记》简介
		</div>
		<div class="content">
			<p>
				西游记简介：讲述了一个和尚和四个动物的故事。讲述了一个和尚和四个动物的故事。讲述了一个和尚和四个动物的故事。讲述了一个和尚和四个动物的故事。讲述了一个和尚和四个动物的故事。
			</p>
		</div>
		<div class="title" data-toggle="content">
			《水浒传》简介
		</div>
		<div class="content" style="display:none;">
			<p>
				水浒传简介：讲述了105个男人和3个女人的故事。讲述了105个男人和3个女人的故事。讲述了105个男人和3个女人的故事。讲述了105个男人和3个女人的故事。讲述了105个男人和3个女人的故事。讲述了105个男人和3个女人的故事。
			</p>
		</div>
		<div class="title" data-toggle="content">
			《红楼梦》简介
		</div>
		<div class="content" style="display:none;">
			<p>
				红楼梦简介：讲述了一个男人和一堆女人的故事。讲述了一个男人和一堆女人的故事。讲述了一个男人和一堆女人的故事。讲述了一个男人和一堆女人的故事。讲述了一个男人和一堆女人的故事。讲述了一个男人和一堆女人的故事。
			</p>
		</div>
	</div>

	<script>
		var container=document.querySelector(".container");
		var title=container.querySelectorAll(".title");
		var content=container.querySelectorAll(".content");
		// console.log(title);
		// 第一个for循环是给所有的title（标题）绑定事件
		for(var i=0;i<title.length;i++){
			// 给每一个title添加自定义属性，这样方便定位当前点击的是哪个title，从而控制对应的面板元素
			title[i].index=i;
			title[i].onclick=function(){
				// for,先将所有面板状态设为隐藏，再将当前的显示
				for(var j=0;j<title.length;j++){
					content[j].style.display="none";
				}
				// 将当前面板设置为显示状态
				content[this.index].style.display="block";


			};
		}
	</script>
</body>
</html>